<template>
  <div class="app-container home">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="4" :lg="4">
        <el-card :body-style="{ padding: '5px' }" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 30px;">站点信息</span>
            <el-button style="float: right; padding: 15px 0" type="text" @click="toStation">查看详情</el-button>
          </div>
          <div style="height: 315px">
            <el-statistic group-separator="," :precision="0" decimal-separator="." :value="stationsCensus.count"
              :title="'站点总数'" style="font-size: 40px;">
              <template slot="prefix">
                <i class="el-icon-s-flag" style="color: red"></i>
              </template>
              <template slot="suffix">
                <i class="el-icon-s-flag" style="color: blue"></i>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card :body-style="{ padding: '5px' }" shadow="hover">
          <LittleGaoDeMap :gaodeStations="stations"></LittleGaoDeMap>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card :body-style="{ padding: '5px' }" shadow="hover">
          <LittleCesium :cesiumStaions="stations"></LittleCesium>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="4" :lg="4">
        <el-card :body-style="{ padding: '5px' }" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 30px;">系统公告</span><br />
            <span style="font-size: 15px;">({{ notice.noticeTitle }})</span>
          </div>
          <div style="height: 300px">
            <div class="ql-container ql-snow">
              <div class="ql-editor" v-html="notice.noticeContent" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10" style="margin-top: 10px;">
      <el-col :xs="24" :sm="24" :md="12" :lg="12">


        <el-card :body-style="{ padding: '5px' }" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 30px;">实时数据</span>
            <el-button style="float: right; padding: 15px 0" type="text" @click="toData">查看详情</el-button>
          </div>
          <div style="height: 315px">
            <el-table v-loading="loading" :data="newRealData" max-height="315">
              <!-- <el-table-column label="数据id" align="center" prop="dataId" /> -->
              <el-table-column label="站点名称" align="center" prop="stationName" />
              <el-table-column label="监测时间" align="center" prop="time" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.time, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="降雨" align="center" prop="rain">
                <template slot-scope="scope">
                  {{ scope.row.rain }} mm
                </template>
              </el-table-column>
              <el-table-column label="温度" align="center" prop="temperature">
                <template slot-scope="scope">
                  {{ scope.row.temperature }} °C
                </template>
              </el-table-column>
              <el-table-column label="气压" align="center" prop="pressure">
                <template slot-scope="scope">
                  {{ scope.row.pressure }} hPa
                </template>
              </el-table-column>
              <el-table-column label="湿度" align="center" prop="humidity">
                <template slot-scope="scope">
                  {{ scope.row.humidity }} %
                </template>
              </el-table-column>
              <el-table-column label="水位" align="center" prop="water">
                <template slot-scope="scope">
                  {{ scope.row.water }} ml
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card :body-style="{ padding: '5px' }" shadow="hover">
          <div slot="header" class="clearfix">
            <el-row :gutter="5">
              <el-col :span="6">
                <el-select v-model="selectedStation" filterable placeholder="请选择站点" @change="getChartData">
                  <el-option v-for="station in stations" :key="station.stationId" :label="station.stationName"
                    :value="station.stationId"></el-option>
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-select v-model="selectedTimeType" placeholder="请选择时间类型" @change="handleTimeTypeChange">
                  <el-option label="小时" value="hour"></el-option>
                  <el-option label="天" value="day"></el-option>
                  <el-option label="月" value="month"></el-option>
                  <el-option label="年" value="year"></el-option>
                </el-select>
              </el-col>
              <el-col :span="12">
                <el-date-picker v-model="selectedTimeRange" :type="timePickerType" start-placeholder="开始时间"
                  end-placeholder="结束时间" range-separator="-" value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions" @change="getChartData"></el-date-picker>
              </el-col>
            </el-row>
          </div>
          <custom-chart :data="chartData" :time-type="selectedTimeType" width="100%" height="325px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LittleGaoDeMap from './tool/littleGaode.vue';
import LittleCesium from './tool/littleCesium.vue';
import CustomChart from './tool/CustomChart.vue';
import { getAll } from "@/api/system/station";
import { getNoticeOne } from "@/api/system/notice";
import { getNewData, searchData } from "@/api/system/data";

export default {
  name: "Index",
  components: {
    LittleGaoDeMap,
    LittleCesium,
    CustomChart
  },
  data() {
    return {
      version: "3.8.9",
      stationData: [
        { name: '站点1', location: '成都市', status: '100' },
        { name: '站点2', location: '重庆市', status: '200' },
        { name: '站点3', location: '昆明市', status: '300' },
      ],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      chartInstance: null,
      stations: [],
      stationsCensus: {
        count: 0,

      },
      notice: {
        noticeTitle: '暂无',
        noticeContent: ''
      },
      newRealData: [],
      // 遮罩层
      loading: true,
      searchDataParam: {
        stationId: null,
        timeType: null,
        params: {
          beginTime: null,
          endTime: null
        }
      },
      chartData: [],
      selectedStation: null,
      selectedTimeType: 'hour',
      selectedTimeRange: [],
      timePickerType: 'datetimerange',
      pickerOptions: {
        disabledDate(time) {
          return false; // 默认不禁用任何日期
        }
      },
    };
  },
  mounted() {

    setTimeout(() => {
      this.getStaions()
    }, 1000)
    this.getNotice()
    this.getNewRealData();
  },
  methods: {
    getChartData() {
      this.searchDataParam.stationId = this.selectedStation;
      this.searchDataParam.timeType = this.selectedTimeType;
      if (null != this.selectedTimeRange && '' != this.selectedTimeRange) {
        this.searchDataParam.params["beginTime"] = this.selectedTimeRange[0];
        this.searchDataParam.params["endTime"] = this.selectedTimeRange[1];
      }

      searchData(this.searchDataParam).then((res) => {
        this.chartData = res.data;
      })
    },
    getStaions() {
      getAll().then((res) => {
        this.stations = res.data;
        this.stationsCensus.count = this.stations.length

        // 设置默认值
        if (this.stations.length > 0) {
          this.selectedStation = this.stations[0].stationId; // 默认选择第一个站点
        }
        this.selectedTimeType = 'hour'; // 默认选择小时
        this.setDefaultTimeRange(); // 设置默认时间范围

        this.getChartData();//获取图表数据

      })
    },
    getNotice() {
      getNoticeOne().then((res) => {
        this.notice = res.data;
      })
    },
    getNewRealData() {
      this.loading = true;

      getNewData().then((res) => {
        this.newRealData = res.data;
        this.loading = false;
      })
    },
    setDefaultTimeRange() {
      const now = new Date();
      const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0); // 今天零点
      const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), 0, 0); // 现在所在的小时

      // 格式化为 yyyy-MM-dd HH:mm:ss
      const formatTime = (date) => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      };

      this.selectedTimeRange = [formatTime(start), formatTime(end)];
    },
    handleTimeTypeChange(value) {
      this.selectedTimeType = value;
      switch (value) {
        case 'hour':
          this.timePickerType = 'datetimerange';
          this.pickerOptions = {
            disabledDate(time) {
              return false; // 默认不禁用任何日期
            }
          };
          break;
        case 'day':
          this.timePickerType = 'daterange';
          this.pickerOptions = {
            disabledDate(time) {
              return false; // 默认不禁用任何日期
            }
          };
          break;
        case 'month':
          this.timePickerType = 'monthrange';
          this.pickerOptions = {
            disabledDate(time) {
              return false; // 默认不禁用任何日期
            }
          };
          break;
        case 'year':
          this.timePickerType = 'daterange';
          this.pickerOptions = {
            disabledDate(time) {
              return false; // 默认不禁用任何日期
            },
            firstDayOfWeek: 1, // 设置每周的第一天为周一
            shortcuts: [
              {
                text: '今年',
                onClick(picker) {
                  const start = new Date();
                  start.setFullYear(start.getFullYear());
                  start.setMonth(0);
                  start.setDate(1);
                  const end = new Date();
                  end.setFullYear(end.getFullYear() + 1);
                  end.setMonth(0);
                  end.setDate(0);
                  picker.$emit('pick', [start, end]);
                }
              },
              {
                text: '去年',
                onClick(picker) {
                  const start = new Date();
                  start.setFullYear(start.getFullYear() - 1);
                  start.setMonth(0);
                  start.setDate(1);
                  const end = new Date();
                  end.setFullYear(end.getFullYear());
                  end.setMonth(0);
                  end.setDate(0);
                  picker.$emit('pick', [start, end]);
                }
              }
            ]
          };
          break;
        default:
          this.timePickerType = 'datetimerange';
          this.pickerOptions = {
            disabledDate(time) {
              return false; // 默认不禁用任何日期
            }
          };
      }
      this.getChartData();
    },
    toStation() {
      this.$router.push('/station');
    },
    toData() {
      this.$router.push('/data');
    }
  },

};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>